import React, { useEffect, useState } from 'react'
import "./index.less"
import { withRouter } from 'react-router-dom'
import Alert from '../../after/after'

// 商品组件
import ShopCom from "../../../components/shopCom"
// react-redux
import { connect } from "react-redux"
// action
import action from '../../../store/action/shopCar'
// antd
import { NavBar, Space, Toast, Button, List, Dialog, Result } from 'antd-mobile'
import { EnvironmentOutline } from 'antd-mobile-icons'

function OrderDetail(props) {
    const [count, setUser] = React.useState({
        flag: false,
        site: {}
    })
    let { carData, priceAll, yhq, time, yunf, site, Xprice } = props.location.state

    let { getData, tueijianData, nowpPayment } = props
    useEffect(() => {
        setUser({ ...count, site })
        getData()
    }, [])
    const right = (
        <div style={{ fontSize: 18 }}>
            <Space>
                <span className="iconfont icon-24gl-headset"></span>
            </Space>
        </div>
    )
    const back = () => {
        props.history.go(-1)
    }


    console.log(carData);
    // 立即支付
    function nowPay() {
        let data = carData.map(item => {
            return {
                Js: item.Js,
                Pj: JSON.parse(item.Pj),
                Xq: JSON.parse(item.Xq),
                flag: item.flag,
                id: item.id,
                img: item.img,
                isCheck: item.isCheck,
                name: item.name,
                num: item.num,
                page: JSON.parse(item.page),
                price: item.price,
                state: item.state,
                time: item.time,
                state: "2",
            }
        })
        nowpPayment(data);
        props.history.push('/shopCar')
    }
    function close(site) {
        setUser({
            ...count,
            flag: false,
            site
        })
    }

    return (
        <div className="orderDetail">
            <header>
                <NavBar right={right} onBack={back}>
                    订单详情
                </NavBar>
            </header>
            <main>
                {/* 提示 */}
                <div className="hint">
                    <div className="hint_left">
                        <h2>待支付</h2>
                        <p>10分钟后订单关闭，请及时付款</p>
                    </div>
                    <div className="hint_right">
                        <img src={require("../../../components/image/待付款.png").default} alt="" />
                    </div>
                </div>
                {/* 收货人 */}
                <div className="consignee">
                    <div>
                        <EnvironmentOutline />
                    </div>
                    <div>
                        <p>收货人：<span>{count.site.userName}</span><span>{count.site.cellPhone}</span></p>
                        <p>{count.site.val}{count.site.house}</p>
                    </div>
                    <div>
                        <p onClick={() => {
                            setUser({ ...count, flag: true })
                        }}>修改</p>
                    </div>
                </div>
                {/* 商品 */}
                <div className="orderMsg_shopBox">
                    <ul>
                        {
                            carData.map((item, index) => {
                                return <li key={index}>
                                    <div>
                                        <img src={item.img} alt="" />
                                    </div>
                                    <div>
                                        <p>
                                            <span>{item.name}</span>
                                            <span>￥{item.price * item.num}</span>
                                        </p>
                                        <p>
                                            <span>规格：200g</span>
                                        </p>
                                        <p>
                                            <span>单价：￥{item.price}</span>
                                        </p>
                                        <p>
                                            <span>数量：{item.num}</span>
                                        </p>
                                    </div>
                                </li>
                            })
                        }
                    </ul>
                </div>
                {/* 商品小计 */}
                <List>
                    <List.Item>
                        <div>
                            <p>商品小计</p>
                            <p>￥{priceAll}</p>
                        </div>
                    </List.Item>
                    <List.Item>
                        <div>
                            <p>应付金额合计</p>
                            <p>{Xprice}</p >
                        </div>
                    </List.Item>
                </List>
                {/* 发票 */}
                <div className="fp">
                    <List>
                        <List.Item>
                            <div>
                                <p>发票</p>
                                <p>暂不支持开局具电子发票</p>
                            </div>
                        </List.Item>
                    </List>
                </div>
                {/* 订单信息 */}
                <div className="orderMsg">
                    <ul>
                        <li>
                            <p>下单时间</p>
                            <p>{time}</p>
                        </li>
                        <li>
                            <p>订单编号</p>
                            <p>
                                <span>2020364918721364</span>
                                <span>复制</span>
                            </p>
                        </li>
                        <li>
                            <p>支付方式</p>
                            <p>支付宝</p>
                        </li>
                        <li>
                            <p>交易流水号</p>
                            <p>224457485467864153114744441</p>
                        </li>
                    </ul>
                </div>
                {/* 为你推荐 */}
                <div className="forYouTJ">
                    <div className="forYouTJ_title">
                        <p className="line"></p>
                        <p className="line_text">为你推荐</p>
                        <p className="line"></p>
                    </div>
                    <div className="forYouTJ_shopList">
                        {
                            tueijianData.map((item, index) => {
                                return <ShopCom key={index} data={item}></ShopCom>
                            })
                        }
                        <p>没有了~</p>
                    </div>
                </div>
            </main>
            <footer>
                <div>

                </div>
                <div>
                    <p onClick={() => {
                        setTimeout(() => {
                            Dialog.alert({
                                content: <Result
                                    status='success'
                                    title='支付成功'
                                />,
                                afterClose: () => {
                                    nowPay()
                                },
                                confirmText: "确认"
                            })
                        }, 1000)
                    }}>
                        <Button color='primary' style={{
                            "--border-radius": "200px",
                            "width": "100px",
                            "--background-color": "#09AFFF",
                            "border": "none"
                        }}>
                            立即支付
                        </Button>
                    </p>
                </div>
            </footer>
            {
                count.flag ? <Alert Liysfalse={close} /> : null
            }
        </div>
    )
}
export default connect(state => state.shop, action)(withRouter(OrderDetail))